<template>
  <div class="main">
    <div v-for="(line, index) in lineInfo?.data" class="line">
      <span class="line-name">{{ line.lineName }}</span>
      <div>
        <router-link :to="{ name: 'BusInfo', params: { line: index + 1 } }">
          {{ line.stationFirst }}
          <span v-if="Number(line.lineNo) < 2">至</span>
          <span v-else>往返</span>
          {{ line.stationLast }}
        </router-link>
      </div>
    </div>
  </div>
</template>

<script lang='ts'>
import { defineComponent, onMounted, ref } from 'vue'
import axios from 'axios'
import { IlineInfo } from '../type/lineInfo'
export default defineComponent({
  setup() {
    const lineInfo = ref<IlineInfo>()
    document.title = '武平公交线路(非官方)-线路列表'
    onMounted(() => {
      axios.get((import.meta.env.PROD ? '/api' : 'http://127.0.0.1:4000') + '/alllineinfo/').then(res => {
        
        lineInfo.value = res.data
        console.log(res.data)
        console.log(lineInfo.value)
      })
    })
    return { lineInfo }
  }
}) 
</script>
<style scoped>
.line {
  margin-top: 0.4rem;
}

.line-name {
  background-color: #dac9a6;
  color: #fff;
}

.main a {
  text-decoration-line: none;
}
</style>